/// <reference path="index.d.ts" />
import React from 'react'
import { Text, View, Image, } from '@tarojs/components'
import { ViewProps } from '@tarojs/components/types/View'
import './index.scss'


type Props = {
    src?: string,
    iconStyle?: React.CSSProperties,
    title: string,
    titleStyle?: React.CSSProperties,
    content?: string | React.ReactNode,
    contentStyle?: React.CSSProperties,
    placeholder?: string,
    showUnderline?: boolean,
    underlineStyle?: React.CSSProperties,
    showNav?: boolean,
    nav?: string,
    /**外边距 */
    spacingHorizontal?: string,

}



export default (props: Props & ViewProps) => {
    const {
        style,
        nav,
        showNav = true,
        spacingHorizontal = '15px',
        ...rest } = props
    return (
        <View style={{ ...styles.container, ...style  as React.CSSProperties}}>
            <View onClick={rest.onClick} style={{ ...styles.innerContainer, margin: `0px ${spacingHorizontal}` }}>
                <View style={{ display: 'flex', flexDirection: 'row', flexShrink: 0, alignItems: 'center', marginRight: '10px',  }}>
                    {
                        rest.src &&
                        <View style={{ display: 'flex', flexDirection: "row", alignItems: 'center' }}>
                            <Image src={rest.src} style={{ display: 'flex', flexShrink: 0, width: '24px', height: '24px', ...props.iconStyle }} mode='aspectFit' />
                            <View style={{ width: '8px' }} />
                        </View>
                    }

                    <Text className={'oneLine'} style={{ color: '#666666', fontSize: '14px', ...props.titleStyle }}>{rest.title}</Text>
                </View>

                <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center', }}>
                    {
                        React.isValidElement(rest.content) ?
                            <View style={{ display: 'flex', flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end',  }}>
                                {rest.content}
                            </View>
                            :
                            <View style={{ flex: 1, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end',  }}>
                                <Text className={`oneLine line2`} style={{ fontSize: '14px', color: (rest.placeholder && !rest.content) ? 'lightgray' : '#333333', ...props.contentStyle }}> {rest.content ? rest.content : rest.placeholder}</Text>
                            </View>
                    }
                    {
                        showNav &&
                            (
                                nav ?
                            <Image style={{ display: 'flex', flexShrink: 0, width: '12px', height: '12px'}} src={nav} />
                            :
                            <View style={{
                                flexShrink: 0,
                                transform: 'rotate(45deg)',
                                width: '7px',
                                height: '7px',
                                borderRightWidth: '2px',
                                borderTopWidth: '2px',
                                borderColor: 'transparent',
                                borderRightColor: '#666666',
                                borderTopColor: '#666666',
                                borderStyle: 'solid',
                                borderRadius: '2px',

                            }} />
                            )
                    }

                </View>
            </View>

            {/* 下划线。 */}
            {
                rest.showUnderline &&
                <View style={{ ...styles.underline, ...rest.underlineStyle }} />
            }
        </View>

    )
}



const styles: { [key: string]: React.CSSProperties } = {
    container: {
        display: 'flex',
        width: 'calc(100%)',
        minHeight: '44px',
        backgroundColor: 'white',
        flexDirection: 'column',
        justifyContent: 'center',
    },
    innerContainer: {
        display: 'flex',
        flex: 1,
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: 'white',
    },
    underline: {
        backgroundColor: '#f5f5f5',
        marginLeft: '15px',
        width: 'calc(100% - 15px)',
        height: '1px'
    }
}

